<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>KISSY gallery - Mustache</title> 
	<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
	<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
	<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<style>
h4 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
}
textarea {
	border: 1px solid #BBBBBB;
	font-family: Inconsolata,monaco,courier;
	font-size: 12px;
	height: 280px;
	margin-bottom: 20px;
	padding: 5px;
	width: 800px;
}
</style>
    <script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
    <script>
        KISSY.config({
            packages:[
                {
                    name:"gallery",
                    tag:"20111220",
                    path:"../../../",  // cdn上适当修改对应路径
                    charset:"utf-8"
                }
            ]
        });
    </script>
    <script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>

</head>
<body>
    <div id="header"> 
		<h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
		<div class="sub-title">Gallery</div>
		<ul class="navigation"> 
			<li><a href="http://blog.kissyui.com/">博客</a></li> 
			<li><a href="http://github.com/kissyteam">源码</a></li> 		
		</ul>
		
	</div> 
    <div id="content">
		<div class="s-crumbs">
			<span>当前位置：</span>
			<a href="http://kissyui.com/">KISSY</a>
			<a href="../../../index.html">Gallery</a>
			<span>Mustache</span>
		</div>
			<pre class="s-section">				
作者：bangyan@taobao.com
功能：Logic-less templates in JavaScript
描述：Mustache 是一种支持众多语言的少逻辑模板。<a href="http://mustache.github.com/mustache.5.html" target="_blank">查看操作手册请点这里</a>。结合 JavaScript 语言逻辑，可以实现更为复杂的模版操作。
源码：<a href="mustache.js">mustache.js</a></pre>
			
			<h3 class="s-title">Demo - 使用 Mustache 渲染模版</h3>			
			<div class="s-section">
				<div class="s-demo">
					<div>
						<h4>Mustache 模版：</h4>
<textarea id="template">
<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}
{{#empty}}
  <p>The list is empty.</p>
{{/empty}}
</textarea>
						<h4>JSON 数据：</h4>
<textarea id="data">
{
  "header": "Colors",
  "items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
  ],
  "empty": false
}</textarea>
						<h4>渲染结果：</h4>
<pre id="mustache"></pre>
					</div>

					<script>
KISSY.use('gallery/mustache/1.0/', function(S, Mustache){

    var template = S.one('#template').html(),
		data = S.JSON.parse(S.one('#data').html()),
		html = Mustache(template, data);

	S.one('#mustache').html(html.replace(/^\s*/mg, ''));

});
					</script>
				</div>
				<a class="s-view-code" href="demo.html#">显示源码</a><!--点击该链接自动帮你显示s=demo里的内容，如不需要，去除链接即可-->
			</div>
			
			<h3 class="s-title">API</h3>			
			<div class="s-section">
				<h4 class="s-api-title">方法</h4>
				<div class="s-api-method"> Mustache ( template, data )</div>
				<h4 class="s-api-title">参数</h4>
				<div class="s-api-params">
					<ul class="s-list">
						<li>{String} [ <em>template</em> ] 模版字符串</li>
						<li>{JSON} [ <em>data</em> ] 模版数据</li>
					</ul>
				</div>
				<h4 class="s-api-title">返回</h4>
				<div class="s-api-return">{String} 渲染后的字符串</div>
			</div>
			
			<h3 class="s-title">Note</h3>			
			<div class="s-section">
				<ul class="s-list">
					<li>http://mustache.github.com/</li>
				</ul>
			</div>
    </div>
    <div id="footer">
        &copy; Copyright 2010~2011, KISSY Team.
    </div>
</body>
</html>